﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marvel</title>
	<!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
     <!-- Morris Chart Styles-->
   
        <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
     <!-- TABLE STYLES-->
    <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<style type="text/css">
        #l-map{
                height:300px;
            }
    </style>
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html"><strong>电气管理系统</strong></a>
            </div>

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Doe</strong>
                                    <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 2</strong>
                                        <span class="pull-right text-muted">28% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%">
                                            <span class="sr-only">28% Complete</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 3</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 4</strong>
                                        <span class="pull-right text-muted">85% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                                            <span class="sr-only">85% Complete (danger)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Tasks</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a>
                    </li>
                    <li>
                        <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
                    </li>
					<li>
                        <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
                    </li>
                    <li>
                        <a href="tab-panel.html"><i class="fa fa-qrcode"></i> Tabs & Panels</a>
                    </li>
                    
                    <li>
                        <a href="table.html" class="active-menu"><i class="fa fa-table"></i>安装信息管理</a>
                    </li>
                    <li>
                        <a href="form.html"><i class="fa fa-edit"></i> Forms </a>
                    </li>


                    <li>
                        <a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="#">Second Level Link</a>
                            </li>
                            <li>
                                <a href="#">Second Level Link</a>
                            </li>
                            <li>
                                <a href="#">Second Level Link<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>

                                </ul>

                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="empty.html"><i class="fa fa-fw fa-file"></i> Empty Page</a>
                    </li>
                </ul>

            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
		
            <div id="page-inner"> 
              

            <div class="row"  id="list"  style="display: block;">

                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="table-responsive">

                         
                                    <a id="addAddress" href="#example" class="btn btn-primary btn-sm">添加记录</a>
                      
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>工作人员</th>
                                            <th>联系方式</th>
                                            <th>安装时间</th>
                                            <th>安装状态</th>
                                            <th>安装地点</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="odd gradeX">
                                            <td>1</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">4</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="even gradeC">
                                            <td>2</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">5</td>
                                            <td class="center">C</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>3</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">5.5</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="even gradeA">
                                            <td>4</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">6</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>5</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>6</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>7</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>8</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>9</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>10</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                        <tr class="odd gradeA">
                                            <td>11</td>
                                            <td>张三</td>
                                            <td>12345678901</td>
                                            <td class="center">7</td>
                                            <td class="center">A</td>
                                            <td class="center"><a href="#example" class="btn btn-link btn-sm moreDetail">安装详情</a></td>
                                            <td class="center"><a href="#" class="btn btn-link btn-sm">删除</a>|<a href="#" class="btn btn-link btn-sm editDetail">修改</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                               
                            </div>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
            <div class="row" id="address" style="display: none;">
             	<div class="col-lg-12">
             	
                    <div class="panel panel-default">
                        <div class="panel-body">
                        	<div class="row">
                        		<div class="col-lg-6">
                        			<p>添加安裝信息：</p>
                        		</div>
                        		<div class="col-lg-6">
                        			<a class="close" data-dismiss="modal">×</a>
                        		</div>
                        	</div>
                        	<hr>
                        	<div class="row">
                        		<div class="col-lg-6">
                        		<form class="form-horizontal">
                        			<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-4 control-label">安装设备人员</label>
    									<div class="col-sm-8">
      										<input type="text" class="form-control" id="inputEmail3" placeholder="安装设备人员">
      									</div>
    								</div>
    								<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-4 control-label">安装人员联系方式</label>
    									<div class="col-sm-8">
      										<input type="text" class="form-control" id="inputEmail3" placeholder="安装人员联系方式">
      									</div>
    								</div>
    								<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-4 control-label">安装地点</label>
    									<div class="col-sm-8">
      										<input type="text" class="form-control" id="addressTextInfo" placeholder="安装地点">
      									</div>
    								</div>
    								<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-4 control-label">安装时间</label>
    									<div class="col-sm-8">
      										<input type="text" class="form-control" id="inputEmail3" placeholder="安装时间">
      									</div>
    								</div>
    								<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-4 control-label">安装状态</label>
    									<div class="col-sm-8">
      										<input type="text" class="form-control" id="inputEmail3" placeholder="安装状态">
      									</div>
    								</div>
                        		</form>
                        	</div>
                        	
                        	<div class="col-lg-6">
                        		<form class="form-horizontal">
                        			<div class="form-group">
                        				<label for="inputEmail3" class="col-sm-2 control-label">请输入:</label>
    									<div class="col-sm-10">
      										<input type="text" id="suggestId"  class="form-control" id="inputEmail3"  size="20" value="百度"  placeholder="百度">
      									</div>
    								</div>
    							</form>
								<div id="searchResultPanel" style="border:1px solid #C0C0C0;height:auto; display:none;"></div>
                        		<div id="l-map"></div>
                        	</div>
                        	</div>
                        	<div class="row">&nbsp;</div>
                        	<div class="row">
                        		<div class="col-lg-1 col-lg-offset-2">
                        			<a href="#" class="btn btn-success">确定</a>
                        		</div>
                        		<div class="col-lg-1">
                    				<a href="#" class="btn btn-danger">取消</a>
                        		</div>
                        	</div>
                    </div>
             	</div>
             	</div>
            </div>
        </div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
     <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
      <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
     <!-- DATA TABLE SCRIPTS -->
    <script src="assets/js/dataTables/jquery.dataTables.js"></script>
    <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
        <script>
            $(document).ready(function () {
                $('#dataTables-example').dataTable();
            });
    </script>
         <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    <script src="assets/js/extend.js"></script>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=btLGkjnTx0nz7DaRruMs5jf6g74B31Ts"></script>
   <script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var marker = new BMap.Marker(r.point);
            map.addOverlay(marker);
            map.panTo(r.point);
            marker.enableDragging();  
            marker.addEventListener("click",getAttr);
			function getAttr(){
				var p = marker.getPosition();       //获取marker的位置
				document.getElementById("addressTextInfo").value="marker的位置是" + p.lng + "," + p.lat; 
			}
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})   
    map.enableScrollWheelZoom(true);
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            var marker = new BMap.Marker(pp);// 创建标注
            map.centerAndZoom(pp, 18);
            map.addOverlay(marker);    //添加标注
            marker.enableDragging();           // 可拖拽
            marker.addEventListener("click",getAttr);
			function getAttr(){
				var p = marker.getPosition();       //获取marker的位置
				document.getElementById("addressTextInfo").value="marker的位置是" + p.lng + "," + p.lat; 
			}
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
    var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 添加定位控件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });
  map.addControl(geolocationControl);
</script>
</body>
</html>
